<template>
	<view class="content">
		<view class="header" v-if="!isShow">
			<u-search placeholder="输入要认领的达人昵称/ID" v-model="value"  :show-action="false" @search="valueSearch"></u-search>
			<text style="margin-left: 12rpx;" @click="cancal">取消</text>
		</view>
		<view class="list" v-if="isShow">
			<view class="item" >
				<!-- 		<image class="stateImg" src="../../static/img/Slice 75.png" mode=""></image> -->
				<view class="padding-sm header_box">
					<text>我的达人名片</text>
					<image src="../../static/img/radio.png" mode="" style="width: 36rpx; height: 36rpx;" v-if="!isShow && !isCheck" @click.stop="isCheckChange"></image>
					<image src="../../static/img/radio1.png" mode="" style="width: 36rpx; height: 36rpx;" v-if="!isShow && isCheck" @click.stop="isCheckChange"></image>
				</view>
				<view class="itemContent">
					<view class="title">
						<view class="name">
							{{myCardList.dy_nickname || ''}}
							<image src="../../static/img/man.png" mode=""></image>
						</view>
						<view class="btns">
							<view class="btn" @click="btnClick" style="width: 152rpx;padding: 0 16rpx;font-size: 24rpx;">
								认领人清单
							</view>
							<view class="frame">
								<image src="../../static/img/Slice 15.png" mode=""></image>
							</view>
							<view class="frame">
               <button class="btnNone" style="display: flex;align-items: top;" open-type="share" catchtap="share">
								<image src="../../static/img/Frame.png" mode=""></image>
               </button>
							</view>
						</view>
					</view>
					<view class="bottomBox">
						<view class="avatar">
							<image src="../../static/img/Slice 40.png" mode=""></image>
						</view>
						<view class="userId" @tap.stop="copy(myCardList.dy_id)">
							抖音ID:{{myCardList.dy_id ||''}}
							<image class="copyImg" src="../../static/img/copy.png" mode=""></image>
						</view>
						<view class="">

						</view>
					</view>
					<view class="lableBoxS">
						<!-- <view style="background-color: #DDE3F9;">
							北京市朝阳区
						</view> -->
						<view v-for="(item,index) in myCardList.category_data" :key="index" style="background-color: #DDE3F9;">
							{{item}}
						</view>
						<view  style="background-color: #CAE5BD;">
							{{myCardList.order_content_type.content_type_name || ''}}
						</view>
						<!-- <view style="background-color: #FFDFC1;">
							美食
						</view>
						<view style="background-color: #CAE5BD;">
							素材直播
						</view> -->
					</view>
					<view class="numbers">
						<view class="numberBox">
							<view class="lable">
								粉丝
							</view>
							<view class="num">
								{{myCardList.fans_num || ''}}
							</view>
						</view>
						<view class="numberBox" style="text-align: center;">
							<view class="lable">
								内容力等级
							</view>
							<view class="num golden">
								Lv{{myCardList.content_level || ''}}
							</view>
						</view>
						<view class="numberBox" style="text-align: right;">
							<view class="lable">
								带货力等级
							</view>
							<view class="num golden">
								Lv{{myCardList.sales_level || ''}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 第二个 -->
			<view class="item" v-for="(item,index) in receiveCard" :key="index">
				<view class="padding-top-sm padding-left-sm">
					认领的达人名片
				</view>
				<view class="itemContent">
					<view class="title">
						<view class="name">
							{{item.anchor_card.dy_nickname ||''}}
							<image src="../../static/img/man.png" mode=""></image>
						</view>
						<view class="btns">
							<view class="frame">
								<image src="../../static/img/Slice 15.png" mode=""></image>
							</view>
							<view class="frame">
								<image src="../../static/img/Frame.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="bottomBox">
						<view class="avatar">
							<image src="../../static/img/Slice 40.png" mode=""></image>
						</view>
						<view class="userId">
							抖音ID:{{item.anchor_card.dy_id || ''}}
							<image class="copyImg" src="../../static/img/copy.png" mode=""></image>
						</view>
						<view class="">

						</view>
					</view>
					<view class="lableBoxS">
						<view v-for="(item,index) in item.anchor_card.category_data" :key="index" style="background-color: #DDE3F9;">
							{{item}}
						</view>
						<view  style="background-color: #CAE5BD;">
							{{item.anchor_card.order_content_type.content_type_name || ''}}
						</view>
						<!-- <view style="background-color: #DDE3F9;">
							北京市朝阳区
						</view>
						<view style="background-color: #FFDFC1;">
							美食
						</view>
						<view style="background-color: #CAE5BD;">
							素材直播
						</view> -->
					</view>
					<view class="numbers">
						<view class="numberBox">
							<view class="lable">
								粉丝
							</view>
							<view class="num">
								{{item.anchor_card.fans_num || ''}}
							</view>
						</view>
						<view class="numberBox" style="text-align: center;">
							<view class="lable">
								内容力等级
							</view>
							<view class="num golden">
								{{item.anchor_card.content_level || ''}}
							</view>
						</view>
						<view class="numberBox" style="text-align: right;">
							<view class="lable">
								带货力等级
							</view>
							<view class="num golden">
								{{item.anchor_card.sales_level || ''}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list" v-else>
			<view class="item" v-for="(item,index) in influencersList" :key="index">
				<view class="padding-sm header_box">
					<text>达人名片</text>
					<image src="../../static/img/radio.png" mode="" style="width: 36rpx; height: 36rpx;" v-if="!item.isCheck" @tap="isCheckChange(item)"></image>
           <image src="../../static/img/radio1.png" mode="" style="width: 36rpx; height: 36rpx;" v-else-if="item.isCheck" @tap="isCheckChange(item)"></image>
				</view>
				<view class="itemContent">
					<view class="title">
						<view class="name">
							{{item.dy_nickname || ''}}
							<image src="../../static/img/man.png" mode=""></image>
						</view>
						<view class="btns">
							<!-- <view class="btn">
								认领人清单
							</view>
			
							<view class="frame">
								<image src="../../static/img/Slice 15.png" mode=""></image>
							</view> -->
							<view class="frame">
								<image src="../../static/img/Frame.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="bottomBox">
						<view class="avatar">
							<image src="../../static/img/Slice 40.png" mode=""></image>
						</view>
						<view class="userId">
							抖音ID:{{item.dy_id ||''}}
							<image class="copyImg" src="../../static/img/copy.png" mode=""></image>
						</view>
						<view class="">
			
						</view>
					</view>
					<view class="lableBoxS">
						<!-- <view style="background-color: #DDE3F9;">
							北京市朝阳区
						</view> -->
						<view v-for="(i,inx) in item.category_data" :key="inx" style="background-color: #DDE3F9;">
							{{i}}
						</view>
						<view  style="background-color: #CAE5BD;">
							{{item.order_content_type.content_type_name || ''}}
						</view>
						<!-- <view style="background-color: #FFDFC1;">
							美食
						</view>
						<view style="background-color: #CAE5BD;">
							素材直播
						</view> -->
					</view>
					<view class="numbers">
						<view class="numberBox">
							<view class="lable">
								粉丝
							</view>
							<view class="num">
								{{item.fans_num || ''}}
							</view>
						</view>
						<view class="numberBox" style="text-align: center;">
							<view class="lable">
								内容力等级
							</view>
							<view class="num golden">
								{{item.content_level || ''}}
							</view>
						</view>
						<view class="numberBox" style="text-align: right;">
							<view class="lable">
								带货力等级
							</view>
							<view class="num golden">
								{{item.sales_level || ''}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		


		<view class="u-flex bottom" v-if="isShow">
			<view class="margin-left-lg" style="color: #7D81A9;border: 2rpx solid rgba(125,129,169,0.3);"  @tap="goAdd">
				<!-- <u-button class="customStyle" :hairline="true" shape="circle" text="创建" @tap="goAdd"></u-button> -->
			创建
      </view>
			<view class="margin-left-lg" style="width: 320rpx;background-color: #7D81A9;color: #fff;" @click="adopt">
				<!-- <u-button color="#7D81A9" shape="circle" text="认领" @click="adopt"></u-button> -->
        认领
			</view>
		</view>
		<view class="u-flex bottom" v-else>
			<view class="padding-sm" style="width: 100%;">
				<u-button color="#7D81A9" shape="circle" text="确认认领" @click="submitAdopt"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {

				customStyle: {
					color: '#999999'
				},

				value: '',
				isShow: true,
				// isCheck:false,
				myCardList: [],
				receiveCard:[],
				influencersList: []
			};
		},
		created() {},
		methods: {
			adopt() {
				this.isShow = false
				// this.getinfluencersList()
			},
      goAdd(){
        uni.navigateTo({
          url:'/pages/add/add'
        })
      },
			async getinfluencersList() {
				const {
				  data: res
				} = await uni.$http.post('anchor/get_anchor_list')
				let data = res.data || {}
				data.forEach(item => {
					item.isCheck = false
				})
        this.influencersList = data
			},
			async submitAdopt() {
				let arr = this.influencersList.filter(item => item.isCheck == true).map(item => item.id)
				let obj = {
					card_ids: arr.toString()
				}
				const {
				  data: res
				} = await uni.$http.post('user/receive_card',obj)
								   
				console.log(res);
				if(res.code != 1) {
					this.toast.msg(res.msg)
					return
				}
				uni.showToast({
					icon:'success',
					title: '申请认证完成'
				})
				this.isShow = true
				let data = res.data || {}
				this.getList()
				
			},
			isCheckChange(item) {
        // this.influencersList.forEach(item => {
        // 	if(i.id == item.id) {
            
        //   }
        // })
				item.isCheck = !item.isCheck
        console.log(item.isCheck);
			},
			async valueSearch() {
				let obj = {
					search_data: this.value
				}
				const {
				  data: res
				} = await uni.$http.post('user/search_card',obj)
				if(res.code != 1) {
					this.toast.msg(res.msg)
					return
				}
				let data = res.data || []
				
				data.forEach(item => {
					item.isCheck = false
				})
        this.influencersList = data
			},
			async getList() {
				const {
				  data: res
				} = await uni.$http.post('user/get_my_card')
								   
				console.log(res);
				let data = res.data || {}
				this.myCardList = data.my_card
				this.receiveCard = data.receive_card
			},
			cancal() {
				this.value = ''
				this.valueSearch()
			},
			// 认领人清单跳转
			btnClick() {
				uni.navigateTo({
					url: "/pages/my/myrlrlist?"
				})
			}
		},
		 onLoad() {
				this.getList()
				console.log(123);
				 // 3、创建商单门店信息
				      // async create_order_storeBtn() {
				        // const obj = {
				        //   order_sn: this.order_sn,
				        //   data: this.shopInfo
				        // }
				  //       const {
				  //         data: res
				  //       } = await uni.$http.post('user/get_my_card')
				   
						// console.log(res);
						// let data = res.data || {}
						// this.myCardList = data.my_card
						// this.receiveCard = data.receive_card
				        // this.order_sn = res.data.order_sn
				        // console.log('创建商单门店信息3');
				        // this.create_order_anchorBtn()
			
		}
	}
</script>

<style lang="scss">
	.shaixuan-title {
		width: 160rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 38rpx;
		margin-left: 30rpx;
		margin-top: 46rpx;

	}

	.grid-text {
		width: 156rpx;
		height: 64rpx;
		background: #F2F3F6;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 64rpx;
		text-align: center;
		margin-top: 42rpx;

	}

	.content {
		min-height: 100vh;
		background-color: #F2F3F6;

		.tabbar {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;
		}

		.headerBox {
			box-sizing: border-box;
			padding-top: 108rpx;
			width: 100%;
			height: 278rpx;
			background: linear-gradient(200deg, #C6CBE1 0%, #FFFFFF 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;

			.title {
				text-align: center;
				font-size: 34rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.screenBox {
				position: relative;
				box-sizing: border-box;
				padding: 0 28rpx 0 56rpx;
				margin-top: 40rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;

				.arrow-down {
					margin-left: 8rpx;
					width: 16rpx;
					height: 16rpx;
				}

				.city {
					margin-right: 56rpx;
				}

				.ipt {
					position: absolute;
					right: 28rpx;
					top: 0;
					box-sizing: border-box;
					width: 338rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #F2F3F6;
					border-radius: 124rpx 124rpx 124rpx 124rpx;
					padding: 0 24rpx 0 32rpx;

					// view {
					//  height: 60rpx;
					//  line-height: 60rpx;
					//   color: rgba(0,0,0,0.4);
					// }
					input {
						height: 60rpx;
						line-height: 60rpx;
						padding-right: 80rpx;
						box-sizing: border-box;
					}

					image {
						position: absolute;
						top: 10rpx;
						right: 24rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.list {
			padding-top: 24rpx;
			.item {
				width: 686rpx;
				// height: 294rpx;
				padding-bottom: 26rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: 24rpx auto;

				.stateImg {
					width: 92rpx;
					height: 36rpx;
				}


				.itemContent {
					padding: 18rpx 22rpx 0 24rpx;

					.title {
						display: flex;
						align-items: center;

						.name {
							flex: 1;
							width: 380rpx;
							font-size: 32rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #000000;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

							image {
								display: inline-block;
								width: 24rpx;
								height: 24rpx;
								margin-left: 8rpx;
							}
						}

						.btns {

							display: flex;
							font-size: 24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;

							.btn {
								width: 128rpx;
								height: 52rpx;
								line-height: 52rpx;
								text-align: center;
								background: #7D81A9;
								border-radius: 40rpx;
								margin-right: 16rpx;
							}

							.frame {
								width: 52rpx;
								height: 52rpx;

								image {
									width: 52rpx;
									height: 52rpx;
								}
							}
						}
					}

					.lableBoxS {
						display: flex;
						color: rgba(0, 0, 0, 0.6);
						font-size: 20rpx;
						margin-top: 20rpx;
						margin-bottom: 18rpx;

						view {
							height: 32rpx;
							line-height: 32rpx;
							padding: 0 12rpx;
							margin-right: 8rpx;
						}
					}

					.numbers {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.numberBox {
							width: 33%;
							display: flex;
							align-items: center;
							text-align: center;
						}

						.lable {
							font-size: 24rpx;
							color: #6E7480;
						}

						.num {
							font-size: 32rpx;
							color: #000000;
						}

						.golden {
							font-size: 32rpx;
							color: #EAA04A;
						}
					}

					.bottomBox {
						display: flex;
						align-items: center;
						height: 52rpx;
						margin-top: 14rpx;

						.avatar {
							width: 44rpx;
							height: 44rpx;
							border-radius: 22rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.userId {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							color: #6E7480;
							margin: 0 8rpx;

							.copyImg {
								width: 28rpx;
								height: 28rpx;
								margin-left: 8rpx;
							}
						}

						.btnS {
							display: flex;

							.btn {
								width: 128rpx;
								height: 52rpx;
								line-height: 52rpx;
								text-align: center;
								background: #7D81A9;
								border-radius: 40rpx;
								font-size: 24rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
								margin-right: 16rpx;
							}

							.shareImg {
								width: 52rpx;
								height: 52rpx;
							}
						}
					}
				}
			}
		}
	.bottom {
		position: fixed;
		bottom: 0;
		height: 176rpx;
		width: 100%;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		background-color: #fff;
		
	}
	.header_box {
		display: flex;
		justify-content: space-between;
	}
	.header {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 0 24rpx;
	}

	}
  .margin-left-lg {
    width: 320rpx;
    height: 80rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;
    border: 2rpx solid rgba(125,129,169,0.3);
    font-size: 28rpx;
    text-align: center;
    line-height: 80rpx;
  }
  .u-button {
    border: none!important;
  }
</style>